<template>
  <div @click="fatherFn">
    <!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 
				 .stop - 阻止事件冒泡
				 .prevent - 阻止默认行为
         .once - 程序运行期间, 只触发一次事件处理函数-->
    <button @click.stop='btn'>.stop阻止事件冒泡</button>
    <!-- <a href="http://www.baidu.com"@click.prevent.stop='btn1'>.prevent阻止默认行为</a> -->
    <a href="http://www.baidu.com"  @click.prevent.stop='btn1'>.prevent阻止默认行为</a>
    <button @click.once.stop="btn2">.once程序运行期间, 只触发一次事件处理函数</button>
  </div>
</template>

<script>

//引入
export default {
  methods: {
    fatherFn(){
      console.log('father');
    },
    btn(){
      console.log('btn');
    },
    btn1(){
    console.log('btn1');
    },
    btn2(){
    console.log('btn2');
    },
  }
}
</script>